<template>
  <div class="table-main">
    <div class="query-content">
      <div class="query-search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-input v-model="formInline.condition" placeholder="请输入主编单位、标准编号或标准名称" style="min-width: 300px" />
          </el-form-item>
          <el-form-item label="发布日期:">
            <el-date-picker v-model="formInline.date1" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable />
          </el-form-item>
          <el-form-item label="实施日期:">
            <el-date-picker v-model="formInline.date2" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable />
          </el-form-item>
        </el-form>
      </div>
      <div class="query-btn">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="standardProjectName" label="标准名称" align="center" />
      <el-table-column prop="standardNumber" label="标准编号" align="center" />
      <el-table-column prop="editorUnitName" label="主编单位" align="center">
        <template #default="scope">
          <el-tooltip effect="dark" :content="scope.row.editorUnitName" placement="top" :disabled="!scope.row.editorUnitName">
            <div class="editor-unit-text">
              {{ scope.row.editorUnitName }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="standardType" label="类型" align="center">
        <template #default="scope">
          <span v-if="scope.row.standardType == '0'">标准</span>
          <span v-else-if="scope.row.standardType == '1'">标准设计</span>
        </template>
      </el-table-column>
      <el-table-column prop="num1" label="图集号" align="center" />
      <el-table-column prop="releaseTime" label="发布日期" align="center" />
      <el-table-column prop="implementationTime" label="实施日期" align="center" />
      <el-table-column prop="" label="意见反馈" align="center">
        <template #default="scope">
          <el-tooltip effect="dark" content="点击进入" placement="bottom" style="cursor: pointer">
            <el-icon size="18" @click="feedback(scope.row)"><ChatLineSquare /></el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-content">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 100]"
          :small="small"
          background
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";

  import { ElConfigProvider } from "element-plus";
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import axios from "axios";
  import { formatDate } from "@/utils/dateFormat";
  import { useRouter } from "vue-router";
  import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
  const router = useRouter();

  const tableData = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const formInline = reactive({
    condition: "",
    date1: [],
    date2: [],
  });
  const small = ref(false);

  const onSubmit = () => {
      currentPage.value = 1;
    initData();
  };
  const onReset = () => {
    formInline.condition = "";
    currentPage.value = 1;
    formInline.date1 = [];
    formInline.date2 = [];
    initData();
  };
  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    initData();
  };
  const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    initData();
  };

  // const fileUrl = ref(':https://ciac.zjw.sh.gov.cn/'); // 文件URL
  const openwindow = (value: any) => {
    // window.open(fileUrl.value, '_blank'); // 使用_blank在新窗口中打开
  };
  const downloadFile = (value: any) => {};
  const initData = async () => {
    try {
      const publishStartDate = formInline.date1 ? formatDate(formInline.date1[0], "yyyy-MM-dd HH:mm:ss") : "";
      const publishEndDate = formInline.date1 ? formatDate(formInline.date1[1], "yyyy-MM-dd HH:mm:ss") : "";
      const implementStartDate = formInline.date2 ? formatDate(formInline.date2[0], "yyyy-MM-dd HH:mm:ss") : "";
      const implementEndDate = formInline.date2 ? formatDate(formInline.date2[1], "yyyy-MM-dd HH:mm:ss") : "";
      const response = await axios.post(serverUrl + "external/localStandard/list", {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        isAbolish: false,
        standardType: 1,
        condition: formInline.condition,
        publishStartDate: publishStartDate,
        publishEndDate: publishEndDate,
        implementStartDate: implementStartDate,
        implementEndDate: implementEndDate,
      });
      const data = response.data.data.list.map((item: any) => ({
        ...item,
        releaseTime: item.releaseTime ? item.releaseTime.substring(0, 10) : "",
        implementationTime: item.implementationTime ? item.implementationTime.substring(0, 10) : "",
      }));
      tableData.value = data;
      total.value = response.data.data.total;
    } catch (error) {
      console.error("数据加载失败:", error);
    }
  };
  onMounted(() => {
    initData();
  });
  // 意见反馈
  const feedback = (value: any) => {
    router.push({ name: "standardQueryFeedback", params: { id: 123, opinionTemplateId: value.opinionTemplateId ? value.opinionTemplateId : "无", projectInfoId: value.projectInfoId,name:value.standardProjectName } }); // 使用路由名称进行导航
  };
</script>
<style lang="scss" scoped>
.query-content {
  display: flex;
  justify-content: space-between;
}

.query-btn {
  min-width: 175px;
}

.pagination-content {
  margin-top: 1.43rem;
  display: flex;
  justify-content: center;
}

.icon-w {
  margin-left: 20px;
}

.editor-unit-text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.5;
  max-height: 3;
}
</style>
